<div class="item-base-display">
    <nz-spin nzSimple *ngIf="loading"></nz-spin>
</div>

<ng-container *ngIf="!loading">
    <ng-container *ngIf="mode=='preview'">
        <nz-input-group [nzSuffix]="suffixIcon">
            <input type="text" nz-input placeholder="搜索页面模块权限" [(ngModel)]="searchValue" (ngModelChange)="searchChange()"/>
        </nz-input-group>
        <ng-template #suffixIcon>
            <i class="iconfont icon-search-2-line"></i>
        </ng-template>
    </ng-container>

    <div class="alert-panel" *ngIf="mode=='check'">
        <i class="iconfont icon-information-line" style="margin-right:8px;"></i>
        红色字体代表未被分配的权限，如权限未被分配完毕，可能会影响系统的使用。
    </div>

    <div class="table-panel">
        <div class="header a-border">
            <div class="h-item s-width r-border">一级菜单</div>
            <div class="h-item s-width r-border">二级菜单</div>
            <div class="h-item s-width r-border">页面/流程节点</div>
            <div class="h-item s-width r-border">页面模块</div>
            <div class="h-item a-width">组件</div>
        </div>
        <div class="body">
            <div class="s-width r-border item-base column">
                <div class="c-item" [ngClass]="{'selected': $any(menu).selected}" *ngFor="let menu of parentMenus"
                    (click)="menusClick(menu, true)">
                    {{menu.name}}
                </div>
            </div>
            <div class="s-width r-border item-base column">
                <div class="c-item" [ngClass]="{'selected': $any(menu).selected}" *ngFor="let menu of childrenMenus"
                    (click)="menusClick(menu, false)">
                    {{menu.name}}
                </div>
            </div>
            <div class="s-width r-border item-base column">
                <ng-container *ngIf="curWorkflow">
                    <div class="c-item" [ngClass]="{'selected': $any(item).selected}"
                        *ngFor="let item of curWorkflow.workflowNodeItems" (click)="flowNodeClick(item)">
                        {{item.flowNode.name}}
                    </div>
                </ng-container>
                <ng-container *ngIf="curPage && !curWorkflow">
                    <div class="c-item selected">
                        {{curPage.name}}
                    </div>
                </ng-container>
            </div>
            <div class="s-width r-border item-base column">
                <ng-container *ngIf="curPage">
                    <div class="c-item" [ngClass]="{'selected': $any(item).selected}"
                        *ngFor="let item of curPage.pageTmpItems" (click)="pageTmpClick(item)">
                        {{item.template.name}}
                    </div>
                </ng-container>
            </div>
            <div class="a-width item-base column-padding">
                <div class="com-item" [ngClass]="{'com-item-bg-bule': mode=='preview'}" nz-row
                    *ngFor="let comItem of curTmpComItems">
                    <div nz-col [nzSpan]="8">
                        {{comItem.component.name}}
                    </div>
                    <div nz-col nzOffset="4" [nzSpan]="12" class="com-permits">
                        <div *ngFor="let comItemPermit of comItem.component.perimitConfig" class="check-label"
                            [ngClass]="{'check-label-bule': mode=='preview'}">
                            {{comItemPermit.permitId}}
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
</ng-container>


<nz-divider></nz-divider>
<div class="floor">
    <button nz-button nzType="default" (click)="cancel()">取消</button>
    <button nz-button nzType="primary" (click)="ok()">确定</button>
</div>